<template>
  <div class="login">
    <div class="box">
      <div class="row">
        <h2>微啪后台管理系统</h2>
      </div>
      <div class="row">
        <span>账号：</span>
        <el-input placeholder="请输入账号" v-model="inputAccount" clearable></el-input>
      </div>
      <div class="row">
        <span>密码：</span>
        <el-input
          placeholder="请输入密码"
          v-model="inputPassword"
          clearable
          show-password
          @keyup.native.enter="login"
        ></el-input>
      </div>
      <div class="row">
        <span></span>
        <div class="rowCheck">
          <el-checkbox v-model="checked">记住密码</el-checkbox>
        </div>
      </div>
      <div class="row">
        <span></span>
        <el-button type="primary" @click="login">登陆</el-button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "login",
  data() {
    return {
      inputAccount: "",
      inputPassword: "",
      loginData: {},
      checked: true
    };
  },
  mounted() {
    // this.$router.push({ path: "/index" });·
    //记住密码
    if (localStorage.getItem("account")) {
      this.inputAccount = localStorage.getItem("account");
    }
    if (localStorage.getItem("password")) {
      this.inputPassword = localStorage.getItem("password");
    }
  },
  methods: {
    async login() {
      if (!this.inputAccount) {
        this.$message("账号不能为空！");
        return;
      }
      if (!this.inputPassword) {
        this.$message("密码不能为空！");
        return;
      }

      let parames = {
        handshake: "",
        data: {
          account: this.inputAccount,
          password: this.inputPassword
        }
      };
      let res = await this.$axios.post(
        this.$api.login,
        JSON.stringify(parames)
      );
      if (res.code == 200) {
        this.loginData = res.data;
        this.$cookies.set("token", this.loginData.token);
        this.$cookies.set("manager_id", this.loginData.manager_id);
        let time = new Date(this.loginData.expired_at).getTime();
        this.$cookies.set("expired", time);
        this.$cookies.set("account", this.inputAccount);
        //记住密码
        if (this.checked) {
          localStorage.setItem("account", this.inputAccount);
          localStorage.setItem("password", this.inputPassword);
        } else {
          localStorage.setItem("account", "");
          localStorage.setItem("password", "");
        }

        this.permissionAllTree();
        this.managerDetailMe();
      } else {
        this.$message(res.message);
      }
    },

    //所有有效权限树
    async permissionAllTree() {
      let parames = {
        handshake: "",
        data: {}
      };
      let res = await this.$axios.post(
        this.$api.permissionAllTree,
        JSON.stringify(parames)
      );
      if (res.code == 200) {
      } else {
      }
    },
    //管理员自己权限详情
    async managerDetailMe() {
      let parames = {
        handshake: "",
        data: {}
      };
      let res = await this.$axios.post(
        this.$api.managerDetailMe,
        JSON.stringify(parames)
      );
      if (res.code == 200) {
        this.permissionsDetail = res.data;
        //将权限存入vuex，以便组件里调用
        if (
          this.permissionsDetail.role &&
          this.permissionsDetail.role.permissions.length > 0
        ) {
          this.$store.commit("setState", {
            key: "permissions",
            value: this.permissionsDetail.role.permissions
          });
        }else{
          this.$store.commit("setState", {
            key: "permissions",
            value: []
          });
        }
        this.$router.push({ path: "/index" });
      } else {
        this.$message(res.message);
      }
    }
  }
};
</script>
<style scoped>
.login {
  width: 100%;
  height: 100vh;
  background: linear-gradient(45deg, #1278f6, #00b4aa 50%, #1278f6);
  display: flex;
  justify-content: center;
  align-items: center;
}
.box {
  width: 5rem;
  background: #fff;
  padding: 0.6rem 0.4rem;
}
.box .row {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.16rem;
  margin-bottom: 0.3rem;
}
.box .row span {
  width: 0.5rem;
}
.el-input {
  width: 70%;
}
.el-button {
  width: 70%;
}
.row .rowCheck {
  width: 70%;
  display: flex;
  justify-content: flex-end;
}
</style>